import { Component } from 'react';
import { Card, Checkbox, Form, Input, Button, message, Spin } from 'antd';
import styles from './index.module.scss';
import logo from 'assets/logo.png';
import { login } from 'api/user';
import { Settoken } from 'utils/localStorage';

export default class Login extends Component {
  onFinish = async (values) => {
    this.setisShow(true);
    try {
      const res = await login(values);
      const { token } = res.data;
      this.setisShow(false);
      Settoken(token);
      message.success('登录成功,欢迎回来!');
      this.props.history.push('/');
    } catch (error) {
      this.setisShow(false);
      if (error.response) message.warning(error.response.data.message);
      else message.error('网络错误,请检查后重试');
    }
  };

  state = {
    isshowLoading: false,
  };

  setisShow = (bool) => {
    this.setState(() => ({ isshowLoading: bool }));
  };

  render() {
    return (
      <div className={styles['login']}>
        <Card className="login-container">
          <Spin spinning={this.state.isshowLoading} tip="登录中......">
            <img src={logo} className="login-logo" alt="" />
            <Form
              initialValues={{
                agree: true,
                mobile: 13911111111,
                code: 246810,
              }}
              onFinish={this.onFinish}
              autoComplete="off"
              validateTrigger={['onChange', 'onBlur']}
            >
              <Form.Item
                name="mobile"
                rules={[
                  {
                    required: true,
                    message: '手机号不能为空',
                  },
                  {
                    pattern: /^1[3-9]\d{9}$/,
                    message: '请输入11位手机号码',
                  },
                ]}
              >
                <Input placeholder="请输入手机号" />
              </Form.Item>

              <Form.Item
                name="code"
                rules={[
                  {
                    required: true,
                    message: '验证码不能为空!',
                  },
                  {
                    pattern: /^\d{6}$/,
                    message: '请输入六位验证码!',
                  },
                ]}
              >
                <Input placeholder="请输入验证码" />
              </Form.Item>

              <Form.Item
                name="agree"
                valuePropName="checked"
                rules={[
                  {
                    validator: (_, value) =>
                      value
                        ? Promise.resolve()
                        : Promise.reject(new Error('请仔细阅读并勾选')),
                  },
                  // {
                  //   validator: (rules, value, callback) =>
                  //     value
                  //       ? callback()
                  //       : callback(new Error('请仔细阅读并勾选')),
                  // },
                ]}
              >
                <Checkbox>我已阅读并同意[隐私条款]和[用户协议]</Checkbox>
              </Form.Item>

              <Form.Item>
                <Button block type="primary" htmlType="submit">
                  登录
                </Button>
              </Form.Item>
            </Form>
          </Spin>
        </Card>
      </div>
    );
  }
}
